<template>
  <div>
    <div class="contan">
      <div class="contan-top">
        <div class="contan-sj contan-item">
          <div class="left">
            <a></a>
            <span>试卷名称</span>
          </div>
          <div class="right">
            <input
              type="text"
              v-model="aiJlObj.sj_name"
              placeholder="请输入试卷名称"
            />
          </div>
        </div>
        <div class="contan-km contan-item">
          <el-collapse v-model="activename" class="collapse">
            <el-collapse-item title="科目" name="1">
              <ul class="collapse-ul">
                <li
                  class="collapse-li"
                  :class="{ active: index == chooseIndex }"
                  @click="kmchoose(item, index)"
                  v-for="(item, index) of kmlists"
                  :key="item.code"
                >
                  {{ item.title }}
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div></div>
      </div>
      <div class="contan-tx">
        <a></a>
        <span>题型设置</span>
      </div>
      <div class="contan-sz" v-if="totalData.dan">
        <div class="bar">
          <div class="bar-input">
            单选题<input
              type="text"
              @input="first"
              v-model="aiJlObj.first_num"
            />道
          </div>
          <el-progress
            :format="formatD"
            color="#FF6900"
            :percentage="
              totalData.dan * 1 == 0
                ? totalData.dan * 1
                : (aiJlObj.first_num * 100) / totalData.dan
            "
          ></el-progress>
        </div>
        <div class="bar">
          <div class="bar-input">
            多选题<input
              type="text"
              @change="second"
              v-model="aiJlObj.second_num"
            />道
          </div>
          <el-progress
            :format="formatS"
            color="#FF6900"
            :percentage="
              totalData.duo * 1 == 0
                ? totalData.duo * 1
                : (aiJlObj.second_num * 100) / totalData.duo
            "
          ></el-progress>
        </div>
        <div class="bar">
          <div class="bar-input">
            案例题<input
              type="text"
              @change="third"
              v-model="aiJlObj.third_num"
            />道
          </div>
          <el-progress
            :format="formatC"
            color="#FF6900"
            :percentage="
              totalData.cai * 1 == 0
                ? totalData.cai * 1
                : (aiJlObj.third_num * 100) / totalData.cai
            "
          ></el-progress>
        </div>
      </div>
      <div class="buton">
        <Button class="btn" @click="goextm">开始做题</Button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  props: {
    xmlb: {
      type: String,
    },
  },
  data() {
    return {
      activename: "1",
      aiJlObj: {
        sj_name: "建筑智能练习20210627154049",
        token: this.$store.state.$user.token,
        lb_id: "",
        kmlb: "",
        first_num: 10, 
        second_num: 10,
        third_num: 10,
      },
      kmlists: [],
      chooseIndex: 0,
      totalObj: {
        token: this.$store.state.$user.token,
        xmlb_id: "",
        kmlb: "",
      },
      totalData: {},
    };
  },
  methods: {
    first() {
      if (this.aiJlObj.first_num * 1 > this.totalData.dan * 1) {
        this.aiJlObj.first_num = this.totalData.dan;
      }
    },
    second() {
      if (this.aiJlObj.second_num * 1 > this.totalData.duo * 1) {
        this.aiJlObj.second_num = this.totalData.duo;
      }
    },
    third() {
      if (this.aiJlObj.third_num * 1 > this.totalData.cai * 1) {
        this.aiJlObj.third_num = this.totalData.cai;
      }
    },
    znStTotal(obj) {
      this.$api.paper.znStTotal(obj).then((res) => {
        if (res.data.event == "100") {
          this.totalData = res.data.data;

          this.aiJlObj.first_num * 1 > this.totalData.dan * 1
            ? (this.aiJlObj.first_num = this.totalData.dan)
            : (this.aiJlObj.first_num = 10);

          this.aiJlObj.second_num * 1 > this.totalData.duo * 1
            ? (this.aiJlObj.second_num = this.totalData.duo)
            : (this.aiJlObj.second_num = 10);

          this.aiJlObj.third_num * 1 > this.totalData.cai * 1
            ? (this.aiJlObj.third_num = this.totalData.cai)
            : (this.aiJlObj.third_num = 10);
        }
      });
    },

    formatD(percentage) {
      return this.totalData.dan + "道";
    },
    formatS(percentage) {
      return this.totalData.duo + "道";
    },
    formatC(percentage) {
      return this.totalData.cai + "道";
    },
    kmchoose(item, index) {
      this.chooseIndex = index;
      this.aiJlObj.kmlb = item.code;
      this.aiJlObj.sj_name = `${item.title}智能练习${this.day}`;
    },
    goextm() {
      if (
        this.aiJlObj.first_num == 0 &&
        this.aiJlObj.second_num == 0 &&
        this.aiJlObj.third_num == 0
      )
        return this.$Message.error({
          background: true,
          content: "暂无试题",
        });
        // console.log(this.aiJlObj,"this.aiJlObj")
      this.$emit("znexam", this.aiJlObj);
    },
  },
  watch: {
    "aiJlObj.kmlb": {
      handler() {
        this.totalObj.kmlb = this.aiJlObj.kmlb;
        this.znStTotal(this.totalObj);
      },
    },
    xmlb: {
      handler() {},
    },
  },

  created() {
    let km_json = JSON.parse(sessionStorage.getItem("km_json"));
    km_json.shift();
    this.kmlists = km_json;
    this.aiJlObj.kmlb = km_json[0].code;
    this.aiJlObj.sj_name = `${km_json[0].title}智能练习${this.day}`;
    this.totalObj.xmlb_id = sessionStorage.getItem("lb_id");
  },
  computed: {
    ...mapState(["znKmData"]),
    day() {
      let d = new Date();
      let y = d.getFullYear();
      let m = (d.getMonth() + 1 + "").padStart(2, 0);
      let r = (d.getDate() + "").padStart(2, 0);
      let h = (d.getHours() + "").padStart(2, 0);
      let f = (d.getMinutes() + "").padStart(2, 0);
      let miao = (d.getSeconds() + "").padStart(2, 0);
      let rand=Math.ceil((Math.random())*9999)
      return `${y}${m}${r}${rand}`;
    },
  },
};
</script>

<style lang="scss" scoped>
.contan {
  width: 1240px;
  height: 628px;
  background: #ffffff;
  padding-top: 10px;
  .contan-top {
    width: 100%;
    height: 174px;
    // background: aqua;
    .contan-item {
      width: 100%;
      height: 62px;
      background: #ffffff;
      box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    }
    ::v-deep.contan-km {
      .el-collapse {
        padding: 0 20px 0 30px;
        width: 100%;
        height: 100%;
        .el-collapse-item {
          width: 100%;
          height: 100%;
          .el-collapse-item__content {
            .collapse-ul {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .collapse-li {
                cursor: pointer;
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #333333;
                line-height: 20px;
                &.active {
                  color: #ff6900 !important;
                }
              }
            }
          }
          .el-collapse-item__header {
            font-size: 16px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 22px;
            height: 62px;
            &::before {
              content: "";
              display: inline-block;
              width: 4px;
              height: 16px;
              background: linear-gradient(180deg, #ffa200 0%, #ff6900 100%);
              border-radius: 2px;
              margin-right: 8px;
            }
          }
        }
      }
    }
    .contan-sj {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 20px 0 30px;
      .left {
        display: flex;
        align-items: center;
        justify-content: center;
        a {
          width: 4px;
          height: 16px;
          background: linear-gradient(180deg, #ffa200 0%, #ff6900 100%);
          border-radius: 2px;
          margin-right: 8px;
        }
        span {
          width: 64px;
          height: 22px;
          font-size: 16px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #333333;
          line-height: 22px;
        }
      }
      .right {
        width: 272px;
        height: 40px;
        background: #ffffff;
        box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.2);
        input {
          width: 100%;
          height: 100%;
          padding-right: 20px;
          &::placeholder {
            text-align: right;
            width: 112px;
            height: 22px;
            font-size: 16px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            line-height: 22px;
          }
        }
      }
    }
  }
  .contan-tx {
    width: 1240px;
    height: 62px;
    background: #ffffff;
    box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 30px;
    a {
      width: 4px;
      height: 16px;
      background: linear-gradient(180deg, #ffa200 0%, #ff6900 100%);
      border-radius: 2px;
      margin-right: 8px;
    }
    span {
      width: 64px;
      height: 22px;
      font-size: 16px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
      line-height: 22px;
    }
  }
  .contan-sz {
    width: 1240px;
    height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    ::v-deep.bar {
      width: 380px;

      .bar-input {
        width: 100%;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
        line-height: 20px;
        margin-bottom: 16px;
        input {
          width: 54px;
          height: 28px;
          background: #ffffff;
          //   opacity: 0.1;
          border: 1px solid rgba(3, 3, 3, 0.1);
          margin: 0 5px;
        }
      }
      .bar-progress {
      }
    }
  }
  .buton {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-top: 212px;
    .fz {
      margin-bottom: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
      div {
        width: 73px;
        height: 20px;
        font-size: 14px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 20px;
        span {
          color: #ff6900;
        }
        &:first-child {
          margin-right: 48px;
        }
      }
    }
    .btn {
      width: 254px;
      height: 46px;
      background: linear-gradient(270deg, #ff6900 0%, #ffab70 100%);
      border-radius: 4px;
      font-size: 14px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 46px;
    }
  }
}
</style>